import {Component, OnInit, ElementRef,Input,Output,EventEmitter} from '@angular/core';
import {Helper} from '../libs/Helper'
@Component({
    selector: 'tile',
    template: 
    `
    <div class="sapUshellTileOuter">
        <div class="sapUshellTile" (click)="clicked($event)">
            <div class="sapUshellTileInner">
                <div class="sapUshellTileBase">
                    <div class="sapUshellTileBaseHeader">
                        <h3 class="sapUshellTileBaseTitle" >{{tileObject.Title}}</h3>
                        <h4 class="sapUshellTileBaseSubtitle">{{tileObject.SubTitle}}</h4>
                    </div>
                    <div class="sapUshellDynamicTile">
                        <div class="sapUshellDynamicTileData">
                            <div class="sapUshellDynamicTileIndication">
                                <div class="sapUshellDynamicTileDataNone sapUshellDynamicTileStateArrow">
                                </div>
                                <br>
                                <div class="sapUshellDynamicTileNumberFactor" aria-label="Units">
                                </div>
                            </div>
                            <div class="sapUshellDynamicTileNumber" aria-label="Value1">{{tileObject.Num}}
                            </div>
                        </div>
                    </div>
                    <i [ngClass]="setClasses()" aria-hidden="true"></i>
                    <Input *ngIf="tileObject.Edit" (change)="remove($event)" id="{{tileObject.id}}" class="TileCheckBox k-checkbox" type="checkbox" checked="checked"/>
                     <label *ngIf="tileObject.Edit" class="TileCheckBox k-checkbox-label" attr.for="{{tileObject.id}}"></label>
                    <div class="sapUshellTileBaseInfo" aria-label="Value1">{{tileObject.Info}}
                    </div>
                </div>
            </div>
        </div>
    </div>
    `
})

export class Tile implements OnInit {
    @Input() tileObject: TileObject;
    @Output() RemoveTile = new EventEmitter();
    @Output() TilePress = new EventEmitter();

    constructor(private element: ElementRef) {   
    }
    ngOnInit() {

    }

    remove(){
        this.RemoveTile.emit(this.tileObject);
    }

    setClasses() {
        let classes =  {
            sapUshellTileBaseIcon: true
        };
        classes["icon-header"]=true;
        classes[this.tileObject.Icon]=true;
        return classes;
    }

    clicked(event:any) {
        this.TilePress.emit(this.tileObject)
    }
} 

export class TileObject{
    public Edit:boolean;
    public id=Helper.GUID();
    public Title : string;
    public SubTitle:string;
    public Icon:string;
    public Info:string;
    public Num :number;
}